<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="/js/layui/css/layui.css"
      th:href="@{/js/layui/css/layui.css}"
    />
    <link
      rel="stylesheet"
      href="/css/forecast-edit.css"
      th:href="@{/css/forecastmonitor.css}"
    />
    <link rel="stylesheet" href="./layui-v2.7.6/./layui/css/layui.css" />
    <link rel="stylesheet" href="../../../static/css/layui.css" th:href="@{/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/css/style.css" th:href="@{/css/style.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2.min.css"
      th:href="@{/ajax/libs/select2/select2.min.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/select2/select2-bootstrap.min.css"
      th:href="@{/ajax/libs/select2/select2-bootstrap.min.css}" />
    <link rel="stylesheet" href="../../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/jquery-layout/jquery.layout-latest.css"
      th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/bootstrap-table/bootstrap-table.min.css"
      th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" />
    <link rel="stylesheet" href="../../../static/css/animate.min.css" th:href="@{/css/animate.min.css}" />
    <link rel="stylesheet" href="../../../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css}" />
    <link rel="stylesheet" href="../../../static/css/add.css" th:href="@{/css/add.css}" />
    <link rel="stylesheet" href="../../../static/css/equipment.css" th:href="@{/css/equipment.css}" />
    <link rel="stylesheet" href="../../../static/css/oy-jichu.css" th:href="@{/css/oy-jichu.css}" />
    <link rel="stylesheet" href="../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}" />
    <link rel="stylesheet" href="../../../static/ajax/libs/layui/css/modules/laydate/default/laydate.css" />
  </head>

  <body>
    <!-- 预警设置 -->
    <div class="container">
      <div class="rightCard">
        <div class="top layui-panel">
          <!-- <button type="button" class="layui-btn layui-btn-normal createBtn">
            创建预警
          </button> -->
          <div class="search">
            <input
              type="text"
              required
              lay-verify="required"
              placeholder="请输入预警名称"
              autocomplete="off"
              class="layui-input searchInput"
            />
            <button type="button" class="layui-btn layui-btn-primary"
            style="flex: 1;background-color: #1ab394;border-color: #1ab394; color: white;" id="search">
            <i class="fa fa-search"></i>&nbsp;搜索
          </button>
          </div>
        </div>
        <!-- 右卡片搜索位置 end -->

        <!-- 表格部分 start -->
        <div class="layui-panel">
          <table id="table" lay-filter="test"></table>
          <div id="pages" style="margin-left: 30%"></div>
        </div>
        <!-- 表格部分 end -->
      </div>
    </div>

    <!-- 创建工单弹窗 start -->
    <!-- <div id="popupDiv" style="display: none">
      <label class="layui-form-label required">名称</label>
      <div class="layui-input-block">
        <input
          type="text"
          name="title"
          required
          lay-verify="required"
          placeholder="请输入名称"
          autocomplete="off"
          class="layui-input warningNames"
        />
      </div>
      <label class="layui-form-label required">请选择历史场景</label>
      <div class="inp layui-input-block">
        <div id="selectData" style="display: none"></div>
      </div>
      <div class="bottomBtn">
        <button class="layui-btn layui-btn-sm addbtn">确定</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary cancelBtn">
          取消
        </button>
      </div>
    </div> -->
    <!-- 创建工单弹窗 end -->

    <!-- 编辑按钮弹窗 start -->
    <div id="setBtnPopup" style="display: none">
      <form
        class="layui-form setBtnForm"
        id="addGoodsForm"
        onsubmit="return false"
      >
        <div>
          <label class="layui-form-label required">场景编号</label>
          <div class="layui-input-block">
            <input
              name="sceneId"
              readonly
              type="text"
              required
              lay-verify="required"
              placeholder="请输入场景编号"
              autocomplete="off"
              class="layui-input warningName"
            />
          </div>
        </div>
        <div>
          <label class="layui-form-label required">预警ID</label>
          <div class="layui-input-block">
            <input
              name="warningCode"
              type="text"
              lay-verify="required"
              placeholder="请输入id"
              autocomplete="off"
              class="layui-input warningName"
            />
          </div>
        </div>
        <div>
          <label class="layui-form-label required">预警名称</label>
          <div class="layui-input-block">
            <input
              name="warningName"
              type="text"
              lay-verify="required"
              placeholder="请输入标题"
              autocomplete="off"
              class="layui-input warningName"
            />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">预警类型</label>
          <div class="layui-input-block">
            <select name="warningType" id="sel" lay-verify="required">
              <option value=""></option>
              <option value="0">同比预警</option>
              <option value="1">环比预警</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">启用状态</label>
          <div class="layui-input-block">
            <select name="status" lay-verify="required">
              <option value=""></option>
              <option value="0">启用</option>
              <option value="1">禁用</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
              <i class="fa fa-plus"></i>
              立即提交
            </button>
            <button class="layui-btn layui-btn-primary setBtn">取消</button>
          </div>
        </div>
      </form>
    </div>
    <!-- 编辑按钮弹窗 end -->

    <script src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="/js/layui/layui.js" th:src="@{/js/layui/layui.js}"></script>
    <script th:inline="javascript">
      // 表格部分
      $(function () {
        // 预警设置列表请求
        layui.use(
          ["table", "element", "layer", "dropdown", "laypage"],
          function () {
            var laypage = layui.laypage;
            var page = {
              pageNum: 1,
              pageSize: 10,
            };
            var table = layui.table;
            var layer = layui.layer;
            /**
             * 顶部搜索按钮
             *
             */
            $(".layui-icon-search").on("click", function () {
              let warningName = $(".searchInput").val();
              $.ajax({
                method: "post",
                url: "/youtian/failureRateMonitor/list",
                data: { warningName },
                success: function (res) {
                  console.log(res, "筛选成功");
                  tableFn(res);
                },
              });
            });
            /**
             *
             * 表格渲染数据
             */
            function earlyWarningList() {
              $.ajax({
                method: "post",
                url: "/youtian/failureRateMonitor/list",
                data: page,
                success: function (res) {
                  console.log(res, "res");
                  if (res.code == 0) {
                    tableFn(res);
                  } else {
                    layui.layer.msg("获取数据失败", { icon: 2 });
                  }
                },
              });
            }
            /**
             *  表格实例
             * */
            function tableFn(res) {
              table.render({
                elem: "#table",
                id: "idTest",
                height: 430,
                data: res.rows,
                cols: [
                  [
                    //表头
                    {
                      title: "序号",
                      width: "5%",
                      align: "center",
                      type: "numbers",
                    },
                    {
                      field: "sceneName",
                      title: "场景名称",
                      width: "15%",
                      align: "center",
                    },
                    {
                      field: "warningName",
                      title: "预警设置",
                      width: "15%",
                      align: "center",
                    },
                    {
                      field: "failureRate",
                      title: "故障发生率",
                      width: "15%",
                      align: "center",
                      templet: $("#failureRateBox"),
                    },
                    {
                      field: "failureGrowthRate",
                      title: "故障增长率",
                      width: "15%",
                      align: "center",
                      templet: $("#failureGrowthRateBox"),
                    },
                    {
                      field: "warningType",
                      title: "预警方式",
                      width: "15%",
                      align: "center",
                      template: $("#pageBox"),
                    },
                    {
                      field: "words",
                      title: "操作",
                      templet: "#toolEventDemo",
                      align: "center",
                    },
                  ],
                ],
              });
              // 分页功能
              laypage.render({
                elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
                count: res.total, //数据总数，从服务端得到
                curr: page.pageNum,
                layout: ["prev", "page", "next", "skip"],
                limit: page.pageSize,
                jump: function (obj, first) {
                  //obj包含了当前分页的所有参数，比如：
                  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                  console.log(obj.limit); //得到每页显示的条数
                  page.pageSize = obj.limit;
                  page.pageNum = obj.curr;
                  console.log(page, "page");
                  //首次不执行
                  if (!first) {
                    $.ajax({
                      method: "post",
                      url: "/youtian/failureRateMonitor/list",
                      data: page,
                      success: function (res) {
                        console.log(res, "res");
                        if (res.code == 0) {
                          tableFn(res);
                        } else {
                          layui.layer.msg("获取数据失败", { icon: 2 });
                        }
                      },
                    });
                  }
                },
              });
            }

            earlyWarningList();
            var tableObj = {};
            //单元格工具事件
            table.on("tool(test)", function (obj) {
              // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              if (layEvent === "del") {
                console.log(obj, "obj");
                //删除
                layer.confirm("确定删除吗？", function (index) {
                  $.ajax({
                    method: "post",
                    url: `/youtian/failureRateMonitor/remove?ids=${obj.data.id}`,
                    success: function (res) {
                      if (res.code == 0) {
                        layui.layer.msg("删除成功", { icon: 1 });
                      } else {
                        layui.layer.msg("删除失败，请稍后重试", { icon: 2 });
                      }
                    },
                  });
                  console.log(data, "data");
                  console.log(obj.data.id, "obj.data.id");
                  obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                  layer.close(index);

                  console.log(123);
                  // 向服务端发送删除请求，执行完毕后，可通过 reloadData 方法完成数据重载
                });
              } else if (layEvent === "edit") {
                //编辑
                // console.log(obj.data, obj, "obj.data");
                // $("[name=sceneId]").val(obj.data.sceneId);
                // $("[name=warningCode]").val(obj.data.warningCode);
                // $("[name=warningName]").val(obj.data.warningName);
                // $("[name=warningType]").val(obj.data.warningType);
                // $("[name=status]").val(obj.data.status);
                // layui.form.render("select");
                // //do something
                // var indexs = layer.open({
                //   type: 1,
                //   title: "编辑",
                //   area: ["700px", "500px"],
                //   move: false,
                //   content: $("#setBtnPopup"), //这里content是一个普通的String
                //   cancel: function (index, layero) {
                //     // $("#popupDiv").css("display", "none");
                //     layer.close(indexs);
                //   },
                // });
                // //提交
                // layui.form.on("submit(formDemo)", function (data) {
                //   data.field.id = obj.data.id;
                //   console.log(data.field, "field");
                //   $.ajax({
                //     method: "post",
                //     url: "/earlyWarning/edit",
                //     data: data.field,
                //     success: function (res) {
                //       if (res.code == 0) {
                //         layui.layer.msg("修改成功", { icon: 1 });
                //         earlyWarningList();
                //       } else {
                //         layui.layer.msg("修改失败，请稍后再试", { icon: 1 });
                //       }
                //     },
                //   });
                //   console.log(13323);
                //   layer.close(indexs);
                // });
                // $(".setBtn").on("click", function () {
                //   layer.close(indexs);
                // });
              }
            });
            /**
             *
             * 点击创建预警后弹窗
             *
             * */
            var index;
            $(".createBtn").on("click", function () {
              layui.use(["layer", "laydate", "form"], function () {
                // var layer = layui.layer;
                // index = layer.open({
                //   type: 1,
                //   title: "预警创建",
                //   area: ["700px", "500px"],
                //   move: false,
                //   content: $("#popupDiv"), //这里content是一个普通的String
                //   cancel: function (index, layero) {
                //     $("#popupDiv").css("display", "none");
                //     layer.close(index);
                //     $("#selectData").fadeOut();
                //     $(".selectSpan").html("请选择历史场景");
                //   },
                // });
                /**
                 * 点击取消关闭弹窗
                 */
                $(".cancelBtn").on("click", function () {
                  layui.layer.close(index);
                });

                /**
                 * 点击下拉框选择左侧树数据
                 */
                var tree = layui.tree;
                var earlyWarningData = {
                  warningType: "0",
                };
                $(".selectSpan").on("click", function () {
                  $("#selectData").fadeIn();
                  $.ajax({
                    method: "get",
                    url: "/youtian/scene-category/tree",
                    success: function (res) {
                      var tree = layui.tree;
                      var inst1 = tree.render({
                        elem: "#selectData",
                        data: res.data,
                        click: function (obj) {
                          $("#selectData").fadeOut();
                          $(".selectSpan").html(obj.data.title);
                          console.log("obj.data.title=======", obj.data.title);
                          earlyWarningData.sceneId = obj.data.id;
                        },
                      });
                    },
                  });
                });
              });
            });
            time();
            setInterval(time, 30000);
            function time() {
              $.ajax({
                method: "post",
                url: "/youtian/failureRateMonitor/list",
                success: function (res) {
                  console.log(res, "resset");
                  let data = res.rows;
                  let sceneNames = [];
                  data.forEach((item) => {
                    if (item.failureRate > 0.2) {
                      sceneNames.push(item.sceneName);
                    }
                  });
                  if (res.code === 0) {
                    if (sceneNames.length !== 0) {
                      layer.alert(
                        `提示: ${sceneNames}故障发生率超出20%，请及时查看`,
                        { offset: "rb", title: "提醒", shade: 0 }
                      );
                    }
                  } else {
                    layui.layer.msg("数据获取失败，请稍后重试", { icon: 2 });
                  }
                },
              });
            }
          }
        );
      });
    </script>
    <script type="text/html" id="toolEventDemo">
      <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        ><i class="fa fa-remove"></i>删除</a
      >
    </script>
    <script type="text/html" id="pageBox">
      {{# if(d.warningType == 0){ }} 同比预警 {{# } }} {{# if(d.warningType ==
      1){ }} 环比预警 {{# } }}
    </script>
    <script type="text/html" id="failureRateBox">
      {{ d.failureRate * 100 + "%"}}
    </script>
    <script type="text/html" id="failureGrowthRateBox">
      {{ d.failureGrowthRate* 100 + "%"}}
    </script>
  </body>
</html>
